<template>
  <div>
    <BasicModal @register="edgeRegisterModal" v-bind="$attrs" :helpMessage="['提示1', '提示2']">
      <Tabs :animated="true" v-model:activeKey="accessKey" centered>
        <TabPane v-for="(item, index) in navBarList" :key="index.toString()" :force-render="true">
          <!--使用插槽为标签页添加图标-->
          <template #tab>
            <Icon :icon="item.icon" />
            {{ item.name }}
          </template>
          <!--标签内容-->
          {{ edgeinfoList }}
        </TabPane>
      </Tabs>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { navBarList } from '../edge.data';
  import { getTheEdgeInfo } from '/@/api/thingsborad/edge/edge';
  import { ref } from 'vue';
  import { watch } from 'vue';
  import Icon from '/@/components/Icon';
  // 标签页监听回调
  let accessKey = ref('0');
  let edgeinfoList = ref<any>();
  let oneEdgeInfoData = ref<any>();
  const [edgeRegisterModal] = useModalInner((data) => {
    oneEdgeInfoData.value = data;
    getTheEdgedata(data.id.id, 'ubuntu');
  });

  watch(
    () => accessKey.value,
    (nVal) => {
      if (nVal === '0') {
        getTheEdgedata(oneEdgeInfoData.value.id.id, 'ubuntu');
      } else if (nVal === '1') {
        getTheEdgedata(oneEdgeInfoData.value.id.id, 'centos');
      } else {
        getTheEdgedata(oneEdgeInfoData.value.id.id, 'docker');
      }
    },
  );

  async function getTheEdgedata(id: string, type: string) {
    try {
      const edgeInfoData = await getTheEdgeInfo(`${id}/${type}`);
      edgeinfoList.value = edgeInfoData.installInstructions;
    } catch (error) {}
  }
</script>
